<%--
  Created by IntelliJ IDEA.
  User: 42585
  Date: 2021/1/28
  Time: 9:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>导航首页</title>

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/webdesk.ui.core.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/ctrls.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/treemenu.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/tabs.js"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css_s/treemenu.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css_s/tabs.css"/>

    <style type="text/css">
        html,
        body {
            overflow: hidden;
            background: url(${pageContext.request.contextPath}/imgs/bei2.jpg);
            background-size: 100% 100%;
            background-color: #444;
        }

        h1 {
            font-size: 25px;
            color: #333;
            margin: 0px;
            display: block;
            overflow: hidden;
            height: 40px;
            font-weight: 900;
            white-space: nowrap;
            text-shadow: .2rem 0rem 1.2rem rgba(255, 255, 255, 1), -.2rem 0rem 1.2rem rgba(255, 255, 255, 1), 0rem .2rem 1.2rem rgba(255, 255, 255, 1), 0rem -.2rem 1.2rem rgba(255, 255, 255, 1);
        }

        h1 span {

            font-size: 15px;
            margin-left: 20px;
        }

        h1 b:before {
            content: "\a009";
            font-size: 30px;
            line-height: 40px;
            margin-right: 10px;
        }

        a.home {
            display: block;
            width: 120px;
            height: 40px;
            line-height: 40px;
            float: right;
            font-size: 14px;
            text-align: center;
            color: #333;
            text-decoration: none;
            font-weight: normal;
        }

        a.home:before {
            content: "\a020";
            font-size: 18px;
            line-height: 40px;
            margin-right: 2px;

            font-family: "webdesk_icon" !important;
        }

        #space {
            float: left;
            background-color: yellow;
            height: 200px;
            width: 200px;
            transition: width 0.3s, height 0.3s;
        }

        #treemenu-area {
            z-index: 999;
        }
    </style>


</head>
<body oncontextmenu='self.event.returnValue=false'>

<div style="height: 40px; padding-left: 20px;">
    <h1><b class="webdesk_icon"></b>医院管理系统 <span>世界医药科技</span><span class='home'>当前登陆的用户：${username }</span><a
            class='home' href="${pageContext.request.contextPath}/">退出</a>
    </h1>
</div>

<div style='margin: 10px;width: calc(100% - 20px);height: calc(100% - 20px - 40px);'>
    <div id="treemenu-area" style="float: left;"></div>
    <div id="tabsbox" style="float: right;"></div>
</div>
</body>

</body>

<script type="text/javascript">
    //动态添加，树形菜单title: '管理首页', tit: '说明',  ico: '图标', url: '跳转地址',type: 'link；另外打开一页',marker: '属性样式',intro: '跳转页标签',childs:'子类'
    var tree = $treemenu.create({
        target: '#treemenu-area',
        width: 100
    });
    var tabs = $tabs.create({
        target: '#tabsbox',
        width: 1,
        default: {title: '首页', path: '欢迎使用', url: '${pageContext.request.contextPath}/firstscreenui'}
    });

    var data = {
        title: '挂号首页',
        tit: '说明',
        ico: 'e72f',
        url: '',
        type: '',
        marker: '',
        intro: '',
        childs: [{
            title: '功能简介',
            url: '${pageContext.request.contextPath}/lowlevelinfoui',
            intro: '基本功能简介'
        }, {
            title: '挂号首页',
            ico: 'a010',
            childs: [{
                title: '专家查询',
                ico: 'a025',
                /*                type: 'link',是否在内部打开*/
                url: '${pageContext.request.contextPath}/loginui'
            }]
        }, {
            title: '医生接诊',
            ico: 'a010',
            childs: [{
                title: '开始就诊填写病历',
                ico: 'a025',
                url: '${pageContext.request.contextPath}/loginui'
            }, {
                title: '检查结果明细',
                ico: 'a025',
                url: '${pageContext.request.contextPath}/loginui'
            }, {
                title: '就医历史',
                ico: 'a025',
                url: '${pageContext.request.contextPath}/loginui'
            }, {
                title: '历史详细',
                ico: 'a025',
                url: '${pageContext.request.contextPath}/loginui'
            }]
        }, {
            title: '检查检验科',
            ico: 'a010',
            childs: [{
                title: '检验检查结果导入',
                ico: 'a025',
                url: '${pageContext.request.contextPath}/loginui'
            }]
        }, {
            title: '付款结算',
            url: '${pageContext.request.contextPath}/loginui'
        }, {
            title: '挂号首页',
            url: '${pageContext.request.contextPath}/loginui'
        }],
        id: 0,
        pid: 0

    };
    tree.add(data);

    tree.watch({
        'width': function (obj, val, old) {
            console.log('宽度由：' + old + ' 变更为:' + val);
        }
    });
    var size = function (s, e) {
        console.log('treemenu的宽:' + e.width + '，高：' + e.height);
        $dom('#tabsbox').width('calc(100% - ' + (e.width + 10) + 'px )');
    };
    tree.onresize(size);
    tree.width = 280;
    //折叠
    tree.onfold(function (s, e) {
        if (e.action == 'fold') {
            $dom('#tabsbox').width('calc(100% - ' + 50 + 'px )');
        } else {
            $dom('#tabsbox').width('calc(100% - ' + (s.width + 10) + 'px )');
        }
    });
    tree.ondata(function (s, e) {
        //console.log('数据源变更：'+JSON.stringify(e.data));
    });
    //树形菜单，根节点切换事件
    tree.onchange(function (s, e) {
        console.log(e.data.title);
    });
    //树形菜单节点点击事件
    tree.onclick(function (s, e) {
        //var url = e.data.url ? e.data.url : '';
        tabs.add(e.data);
    });
    //
</script>
</html>
